<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<title>化妆品店</title>
		<script src="bootstrap/js/jquery-3.5.1.slim.min.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script>
		
		<style type="text/css">
			/*.tu{border-right: solid 1px gainsboro;}*/
			.tuS img{
				display: none;
			}
			.tuShu:hover img{
				display: block;
			}
		</style>
	</head>
	<body>
		<!--导航栏-->
		<nav class="navbar navbar-expand-sm table-primary navbar-dark">
			<a class="navbar-brand"href="#"><img src="img/logo1.png"width="50px"/></a>
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link"href="#">首页</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"href="hf.html">护肤产品</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"href="mspd.html">秒杀频道</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"href="xwzq.html">新闻咨询</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"href="留言板.html">留下建议</a>
				</li>
				<li class="nav-item dropdown">
			        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
			                                     会员中心
			        </a>
			        <div class="dropdown-menu">
			          <a class="dropdown-item" href="qylq.html">权益领取</a>
			          <a class="dropdown-item" href="#">咨询浏览</a>
			          <a class="dropdown-item" href="#">资产管理</a>
			          <a class="dropdown-item" href="#">活动参加</a>
			        </div>
			      </li>
			</ul>
			<form class="form-inline my-2 my-lg-0">
			<input class="form-control mr-sm-0" id="search"placeholder="search"/>
			<button class="btn btn-primary my-2 my-sm-0"type="submit">搜索</button>
			<a href="购物车.html">
			<button class="btn btn-primary ml-3" type="button">购物车</button></a>
			<div class="ml-3">
			<a href="登录.html">登录</a><span>/</span><a href="注册.html">注册</a>
			</div>
		
		</form>
		</nav>
		<!--轮播图-->
		<div id="carouselExampleSlidesOnly" class="carousel slide container" data-ride="carousel">
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="img/b3.jpg"class="d-block w-100"alt="..." height="300px"/>
				</div>
				<div class="carousel-item">
					<img src="img/b8.jpg"class="d-block w-100"alt="..."height="300px"/>
				</div>
				<div class="carousel-item">
					<img src="img/b2.jpg"class="d-block w-100"alt="..." height="300px"/>
				</div>
				<div class="carousel-item">
					<img src="img/b4.jpg"class="d-block w-100"alt="..." height="300px"/>
				</div>
				<div class="carousel-item">
					<img src="img/b5.jpg"class="d-block w-100"alt="..." height="300px"/>
				</div>
			<!--轮播图指示器-->
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleSlidesOnly" data-slide-to="0"class="active"></li>
				<li data-target="#carouselExampleSlidesOnly"data-slide-to="1"></li>
				<li data-target="#carouselExampleSlidesOnly"data-slide-to="2"></li>
				<li data-target="#carouselExampleSlidesOnly"data-slide-to="3"></li>
				<li data-target="#carouselExampleSlidesOnly"data-slide-to="4"></li>
			</ol>
			<!--轮播图左右切换-->
			<a class="carousel-control-prev"href="#carouselExampleSlidesOnly"role="button" data-slide = "prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a class="carousel-control-next"href="#carouselExampleSlidesOnly"role="button" data-slide = "next">
				<span class="carousel-control-next-icon"></span>
			</a>
		</div>
		</div>
		<!--栅格系统-->
		<div class="container">		
					<ul class=" row list-unstyled text-center">
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题1.png" alt="" class="w-50"height="90px"/><p>保湿水乳</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题2.png" alt="" class="w-50"height="90px"/><p>粉底液</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题3.png" alt="" class="w-50"height="90px"/><p>香水</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题4.png" alt="" class="w-50"height="90px"/><p>睫毛膏</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题5.png" alt="" class="w-50"height="90px"/><p>眼影盘</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题6.png" alt="" class="w-50"height="90px"/><p>口红</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题7.png" alt="" class="w-50"height="90px"/><p>眉粉</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题8.png" alt="" class="w-50"height="90px"/><p>洗面奶</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题9.png" alt="" class="w-50"height="90px"/><p>睫毛夹</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题10.png" alt="" class="w-50"height="90px"/><p>唇釉</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题11.png" alt="" class="w-50"height="90px"/><p>面霜</p></a>
						</li>
						<li class="col-2">
							<a href="https://www.taobao.com/"><img src="img/小标题12.png" alt="" class="w-50"height="90px"/><p>粉底刷</p></a>
						</li>
					</ul>
		</div>	
		<div class="container">
			<img src="img/d.jpg"class="w-100"height="300px"/>
		</div>
		<!--标签式导航-->
		<h5 class="text-center"style="margin: 30px 50px;color: dodgerblue;">化妆品分类</h5>
		<div class="container">
		<div class="row mt-2">
			<ul class="nav nav-tabs col-md-10 justify-content-center">
				<li class="nav-item">
					<a class="nav-link active"data-toggle="tab"href="#baoshi">保湿水乳</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"data-toggle="tab"href="#yanying">眼影盘</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"data-toggle="tab"href="#kohong">口红</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"data-toggle="tab"href="#jiemao">睫毛膏</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"data-toggle="tab"href="#fendiye">粉底液</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"data-toggle="tab"href="#xiangshui">香水</a>
				</li>
			</ul>
			<div class="tab-content container">
			<div class="tab-pane fade show active" id="baoshi">
					<ul class=" row list-unstyled text-center"style="margin-top:20px ;">
						<li class="col-3">
							<a href="#">
								<img src="img/bs1.jpeg" alt=""width="150px"height="200px"class="w-100"/>
								<p>&yen;198.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;356.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/bs4.jpg" alt=""width="150px"height="200px"class="w-100"/>
								<p>&yen;299.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;679.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/bs5.png" alt=""width="150px"height="200px"class="w-100"/>
								<p>&yen;168.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;567.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/bs6.png" alt=""width="150px"height="200px"class="w-100"/>
								<p>&yen;199.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;222.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/bs10.png" alt=""width="150px"height="200px"class="w-100"/>
								<p>&yen;300.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;500.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/bs8.png" alt=""width="150px"height="200px"class="w-100"/>
								<p>&yen;500.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;800.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/bs11.png" alt=""width="100px"height="200px"class="w-100"/>
								<p>&yen;600.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;9000.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/bs3.jpeg" alt=""width="100px"height="200px"class="w-100"/>
								<p>&yen;700.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;1000.00</p>
							</a>
						</li>
					</ul>
			</div>
			<div class="tab-pane fade" id="yanying">
					<ul class=" row list-unstyled text-center"style="margin-top:20px ;">
						<li class="col-3">
							<a href="#">
								<img src="img/yy2.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;66.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;94.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/yy3.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;29.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;50.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/yy4.png" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;68.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;88.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/yy5.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;19.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;64.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/yy10.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;30.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;44.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/yy11.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;40.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;70.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/yy12.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;60.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;100.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/yy14.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;50.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;56.00</p>
							</a>
						</li>
					</ul>
			</div>
			<div class="tab-pane fade" id="kohong">
					<ul class=" row list-unstyled text-center"style="margin-top:20px ;">
						<li class="col-3">
							<a href="#">
								<img src="img/kh2.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;66.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;90.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/kh3.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;29.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;56.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/kh4.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;68.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;87.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/kh5.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;19.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;60.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/kh6.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;30.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;66.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/kh7.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;40.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;88.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/kh2.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;60.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;110.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/kh7.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;50.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;100.00</p>
							</a>
						</li>
					</ul>
			</div>
			<div class="tab-pane fade" id="jiemao">
					<ul class=" row list-unstyled text-center"style="margin-top:20px ;">
						<li class="col-3">
							<a href="#">
								<img src="img/jmg1.png" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;53.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;89.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/jmg2.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;49.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;97.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/jmg3.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;18.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;70.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/jmg4.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;39.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;50.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/jmg5.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;30.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;99.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/jmg6.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;40.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;50.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/jmg7.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;30.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;90.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/jmg3.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;20.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;70.00</p>
							</a>
						</li>
					</ul>
			</div>
			<div class="tab-pane fade" id="fendiye">
					<ul class=" row list-unstyled text-center"style="margin-top:20px ;">
						<li class="col-3">
							<a href="#">
								<img src="img/fd8.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;770.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;1000.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/fd7.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;290.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;830.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/fd6.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;68.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;100.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/fd5.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;190.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;340.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/fd4.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;200.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;440.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/fd3.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;400.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;550.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/fd2.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;520.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;1000.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/fd1.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;100.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;310.00</p>
							</a>
						</li>
					</ul>
			</div>
			<div class="tab-pane fade" id="xiangshui">
					<ul class=" row list-unstyled text-center"style="margin-top:20px ;">
						<li class="col-3">
							<a href="#">
								<img src="img/xs4.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;888.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;999.99</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/xs5.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;666.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;888.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/xs6.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;688.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;770.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/xs7.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;1900.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;3100.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/xs8.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;630.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;770.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/xs3.jpg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;430.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;520.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/xs2.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;660.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;800.00</p>
							</a>
						</li>
						<li class="col-3">
							<a href="#">
								<img src="img/xs1.jpeg" alt=""width="200px"height="200px"class="w-100"/>
								<p>&yen;5000.00</p>
								<p class="card-text" style="text-decoration: line-through;">&yen;10000.00</p>
							</a>
						</li>
					</ul>
			</div>
			</div>
		</div>
		</div>
		<!--胶囊式导航-->
		<h5 class="text-center "style="margin: 30px 50px;color: dodgerblue">最新妆容灵感</h5>
		<div class="container">
		<div class="row mt-2 ">
			<ul class="nav nav-pills col-md-10 justify-content-center">
				<li class="nav-item">
					<a class="nav-link active"data-toggle="tab"href="#shl">深海蓝</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"data-toggle="tab"href="#zrgc">自然光彩</a>
				</li>
			</ul>
			<div class="tab-content ">
			<div class="tab-pane fade show active" id="shl">
				<ul class=" row list-unstyled text-center"style="margin-top:20px ;">
						<li class="col-4">
								<img src="img/zr3.jpg" alt="" width="390px"height="500px"class="w-100"/>
						</li>
						<li class="col-4">
								<img src="img/zr7.jpg" alt="" width="390px"height="500px"class="w-100"/>
						</li>
						<li class="col-4">
								<img src="img/zr4.jpg" alt="" width="390px"height="500px"class="w-100"/>
						</li>
				</ul>
			</div>
			<div class="tab-pane fade" id="zrgc">
				<ul class=" row list-unstyled text-center"style="margin-top:20px ;">
						<li class="col-4">
								<img src="img/zr1.jpg" alt="" width="390px"height="500px"class="w-100"/>
						</li>
						<li class="col-4">
								<img src="img/zr6.jpg" alt="" width="390px"height="500px"class="w-100"/>
						</li>
						<li class="col-4">
								<img src="img/zr2.jpg" alt="" width="390px"height="500px"class="w-100"/>
						</li>
				</ul>
			</div>
			</div>		
		</div>
		</div> 
		
		<!--页脚-->	
		<footer class="text-center table-primary ">
				<p class="">&copy; Copyright 2024--2028 All Rights Reserved</p>
				<p class=""><span class="text-danger mr-3">301邓晓菲</span>版权所有</p>
		</footer>
	</body>
</html>
